import BaseComponent from "../../app/baseComponent";

export class AuiInputDatepicker extends BaseComponent {
    constructor(name) {
        super(name);
        this.props = {
            startDate: {
                type: Date,
            },
            endDate: {
                type: Date,
            },
            value: {
                type: Date,
                default: new Date()
            }
        };
        this.methods = {
            onFocus: function() {
                var self = this;
                // self.datepickerStyle.display = "block";
                // self.value = self.now;
                self.showDatePicker = true;
                setTimeout(function() {
                    document.addEventListener("mousedown", self.onInputDatepicker);  
                }, 170);            
            },
            hide() {
                var self = this;
                // self.datepickerStyle.display = "none";
                self.showDatePicker = false;
                setTimeout(function() {
                    document.removeEventListener("mousedown", self.onInputDatepicker);  
                }, 0);                  
            },
            onInputDatepicker(e) {
                var self = this;
                if (self.datepickerStyle.display != "none") {
                    if (!self.$el.contains(e.target)) {
                        // self.$refs.date.reset();    
                        self.hide();
                    }
                }
            },
            getValue(e) {
                var year = parseInt(e.target.getAttribute("data-year"));
                var month = parseInt(e.target.getAttribute("data-month"));
                var day = parseInt(e.target.getAttribute("data-day"));
                return [year, month,  day];
            },
            praseDateToValue(date) {
                return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
            },
            onDateSelect(e) {
                var self = this;
                var newValue = self.getValue(e);
                self.$emit("dateselect", e);
                self.now = new Date(newValue[0], newValue[1], newValue[2]);
                self.inputvalue = self.praseDateToValue(self.now);
                self.$emit("input", self.now);
                // self.$refs.date.refresh(new Date(newValue[0], newValue[1], newValue[2]));
                setTimeout(function() {
                    self.hide();
                }, 0);
            }
        }
    }
    _template() {
        var self = this;
return `
<div class="${self._name}">
    <input type="text"
        readonly
        :value="inputvalue"
        @focus="onFocus">
    <aui-datepicker 
    v-if="showDatePicker"
    :style="datepickerStyle"
    :class="datepickerClass"
    ref="date"
    @dateselect="onDateSelect"
    :now="value"
    :startDate="startDate"
    :endDate="endDate"></aui-datepicker>
</div>
`        
    }
    _mounted() {                
        var self = this;                 
        self.inputvalue =  self.praseDateToValue(self.value);
        self.now = self.value;
    }    
    _data() {
        var ret = {};    
        ret.now = {};
        ret.inputvalue = "";
        ret.showDatePicker = false;
        ret.datepickerClass = {};
        ret.datepickerStyle = {
        };
        return ret;        
    }      
}

AuiInputDatepicker.install = function() {
    window.AUICustomComponents.define("aui-input-datepicker", AuiInputDatepicker);
}